@keyframes fx-animation-button-loading-animation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@mixin keyframe($name,$color) {
  @keyframes fx-animation-button-click-#{$name} {
    from {
      box-shadow: 0 0 0 0 $color;
    }
    to {
      box-shadow: 0 0 2px 5px $color;
    }
  }
}

@include keyframe(primary, rgba(45, 183, 245, .2));
@include keyframe(success, rgba(103, 194, 58, .2));
@include keyframe(warning, rgba(255, 153, 0, .2));
@include keyframe(error, rgba(237, 60, 30, .2));

.fx-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: $button-color-bg;
  height: $height-default;
  line-height: $height-default;
  padding: $button-padding-default;
  border: 1px solid $border-color-default;
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
  white-space: nowrap;
  border-radius: $border-radius-default;
  color: $font-color-default;
  user-select: none;
  position: relative;
  overflow: hidden;

  &.text {
    padding: 0 !important;
    user-select: none;
    cursor: pointer;
    color: $button-color-primary;
    border: none;

    &:active {
      animation: none !important;
    }

    &.hover:hover {
      color: $button-color-primary-bg-7;
      background-color: transparent !important;
    }

    &.disabled {
      color: $button-color-disabled;
    }
  }

  &.circle {
    padding: 0 !important;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    > .loading {
      margin-right: 0;
    }
  }

  &.disabled {
    cursor: not-allowed !important;
    color: $font-color-lowest;

    &:active {
      animation: none !important;
    }
  }

  &.hover:hover {
    border-color: $button-color-primary-bg-7;
    background-color: $button-color-primary-bg-1;
    color: $button-color-primary;
  }

  &.large {
    height: $height-large;
    line-height: $height-large;
    padding: $button-padding-large;

    &.round {
      border-radius: calc(#{$height-large} / 2);
    }

    &.circle {
      width: $height-large;
      overflow: hidden;
    }
  }

  &.middle {
    height: $height-middle;
    line-height: $height-middle;
    padding: $button-padding-middle;

    &.round {
      border-radius: calc(#{$height-middle} / 2);
    }

    &.circle {
      width: $height-middle;
      overflow: hidden;
    }
  }

  &.default {
    height: $height-default;
    line-height: $height-default;
    padding: $button-padding-default;

    &:active {
      animation: fx-animation-button-click-primary 0.3s;
    }

    &.round {
      border-radius: calc(#{$height-default} / 2);
    }

    &.circle {
      width: $height-default;
      overflow: hidden;
    }
  }

  &.mini {
    height: $height-mini;
    line-height: $height-mini;
    padding: $button-padding-mini;

    &.round {
      border-radius: calc(#{$height-mini} / 2);
    }

    &.circle {
      width: $height-mini;
      overflow: hidden;
    }
  }

  &.primary {
    background-color: $button-color-primary;
    border-color: $button-color-primary;
    color: $color-white;

    &:active {
      animation: fx-animation-button-click-primary 0.3s;
    }

    &.hover:hover {
      background-color: $button-color-primary-bg-7;
      border-color: $button-color-primary-bg-7;
      color: $color-white;
    }

    &.disabled {
      background-color: $button-color-primary-bg-3;
      border-color: $button-color-primary-bg-3;
    }

    &.plain {
      background-color: $button-color-primary-bg-1;
      color: $button-color-primary;
      border-color: $button-color-primary;

      &.disabled {
        color: $button-color-primary-bg-5;
        border-color: $button-color-primary-bg-5;
      }

      &.hover:hover {
        background-color: $button-color-primary;
        color: $color-white;
      }
    }
  }

  &.success {
    background-color: $button-color-success;
    border-color: $button-color-success;
    color: $color-white;

    &:active {
      animation: fx-animation-button-click-success 0.3s;
    }

    &.hover:hover {
      background-color: $button-color-success-bg-7;
      border-color: $button-color-success-bg-7;
      color: $color-white;
    }

    &.disabled {
      background-color: $button-color-success-bg-3;
      border-color: $button-color-success-bg-3;
    }

    &.plain {
      background-color: $button-color-success-bg-1;
      color: $button-color-success;
      border-color: $button-color-success;

      &.disabled {
        color: $button-color-success-bg-5;
        border-color: $button-color-success-bg-5;
      }

      &.hover:hover {
        background-color: $button-color-success;
        color: $color-white;
      }
    }
  }

  &.warning {
    background-color: $button-color-warning;
    border-color: $button-color-warning;
    color: $color-white;

    &:active {
      animation: fx-animation-button-click-warning 0.3s;
    }

    &.hover:hover {
      background-color: $button-color-warning-bg-7;
      border-color: $button-color-warning-bg-7;
      color: $color-white;
    }

    &.disabled {
      background-color: $button-color-warning-bg-3;
      border-color: $button-color-warning-bg-3;
    }

    &.plain {
      background-color: $button-color-warning-bg-1;
      color: $button-color-warning;
      border-color: $button-color-warning;

      &.disabled {
        color: $button-color-warning-bg-5;
        border-color: $button-color-warning-bg-5;
      }

      &.hover:hover {
        background-color: $button-color-warning;
        color: $color-white;
      }
    }
  }

  &.error {
    background-color: $button-color-error;
    border-color: $button-color-error;
    color: $color-white;

    &:active {
      animation: fx-animation-button-click-error 0.3s;
    }

    &.hover:hover {
      background-color: $button-color-error-bg-7;
      border-color: $button-color-error-bg-7;
      color: $color-white;
    }

    &.disabled {
      background-color: $button-color-error-bg-3;
      border-color: $button-color-error-bg-3;
    }

    &.plain {
      background-color: $button-color-error-bg-1;
      color: $button-color-error;
      border-color: $button-color-error;

      &.disabled {
        color: $button-color-error-bg-5;
        border-color: $button-color-error-bg-5;
      }

      &.hover:hover {
        background-color: $button-color-error;
        color: $color-white;
      }
    }
  }

  > .loading {
    display: inline-block;
    margin-right: 5px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    transform-origin: center center;

    &.animation {
      animation: fx-animation-button-loading-animation 0.5s infinite linear;
    }
  }
}
